<template>
  <div class="top_se">
    <input type="text" placeholder="请输入查询ID" class="input_c" v-model="selectId"
           @keyup="Interception">
    <img v-show="searchData" class="img1" src="http://sxian.oss-cn-beijing.aliyuncs.com/icon/guanbi1.png"
         @click="delText">
    <!--<img class="img2" :src="this.$Public.ossImg+'arrow_right.svg'" alt="">-->
    <p @click="toSelect" class="img2">查询</p>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'searchinputs',
    props: {
      searchText: {
        type: String
      }
    },
    data() {
      return {
        selectId: '', // 查询的id
        stateSelect: '', // 防止重复查询的标志
        searchData: false // 清空按钮状态
      };
    },
    methods: {
      getIcon(icon) {
        // 获取svg
        return this.$Public.pa + icon + '.svg';
      },
      toSelect() {
        // 根据ID查询数据
        // 校验输入内容
        this.Interception();
        // 原来结果清空
        this.$parent.listState = false;
        // 防止重复查询
        if (this.stateSelect === this.selectId) {
          return;
        }
        // 清空父组件中已查询到的数据
//        this.$emit('feedData', {});
        // 查询到前动画
        this.stateLoad = true;
        this.$UserReq.getVipItem({
          uid: this.selectId
        }).then((res) => {
          this.stateSelect = this.selectId; // 把防止重复查询的变量置为true
          this.$emit('feedData', res);
          // if (res.isdown === true) {
          //   res.selectId = this.selectId;
          //   this.$emit('feedData', res);
          // } else {
          //   this.$emit('readySelect', false);
          // }
          // 告诉父组件我查出来争取的数据了，你去掉加载动画吧
        });
      },
      Interception() {
        // 校验输入内容
        this.selectId = this.selectId.replace(/[^\d]/g, '');
        if (this.selectId.length > 0) {
          this.searchData = true;
        }
      },
      delText() {
        // 清空搜索框
        this.searchData = false;
        this.selectId = '';
        this.$emit('feedData', '');
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .sixian_bc {
    width: 100%;
    position: absolute;
    top: 8vw;
  }

  .input_c {
    background: bk-color;
    width: 100%;
    height: vw(38px);
    word(14px, #666);
    padding: 0 4vw;
    flex-x();
    justify-content flex-start
  }

  .top_se {
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding 0 2vw
    box-sizing border-box
    background: white;
    flex-x();
    box-sizing border-box;
    height: vw(60);
    & .img2 {
      width: vw(60)
      height: vw(38px);
      line-height vw(38px);
      text-align center
      z-index: 2;
      background: gradient-color;
      font-size: 3.2vw;
      color: #fff;
    }
    & .img1 {
      width: 4vw;
      position: absolute;
      right: 18vw;
      padding: 1vw 2vw;
      bottom: 5vw;
      z-index: 2;
    }
  }
</style>
